<template>
  <div class="taskList" id="taskList">
    <!-- 表格展示部分 -->
    <baseTable
      :columns="columns.contentIndexTaskListColumns"
      :dataSource="configData.records"
      :scroll="scroll"
      :isShowPagination="isShowPagination"
      :total="configData.total"
      @changePage="changePage"
    >
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.ellipsis">
          <table-tool-tip :text="text" :column="column"></table-tool-tip>
        </template>
        <template v-if="column.dataIndex === 'oparation'">
          <a
            class="eidtRecords"
            :class="{ disable: !btnPerm.includes('taskLoseDetailAble') }"
            @click="lookDetail(record)"
            >{{ record.oparation[0] }}</a
          >
        </template>
      </template>
    </baseTable>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick } from "vue";
import baseTable from "@/components/table/baseTable.vue";
import { getTableScroll } from "@/components/table/tableConfig/table";
import columns from "@/components/table/tableConfig/columnsName";
import tableToolTip from "@/components/table/tableToolTip.vue";
import request from "@/api/index";
import { useRouter } from "vue-router";
import { scrollType, modeProp } from "@/type.d";
import { routerPerm } from "@/utils/common";
// type
type configDataType = {
  total: number;
  size: number;
  records: any[];
};
interface dataSourceType {
  [propName: string]: any;
}

//data
const btnPerm = ref<any[]>([]);
const router = useRouter();
let scroll: scrollType = reactive({ y: "", isFixed: false });
const isShowPagination = true;
// 当前页和数量
const pageCurrent = ref<number>(1);
const pageSize = ref<number>(10);
let datas = reactive<dataSourceType>({});
let configData = reactive<configDataType>({ total: 0, size: 10, records: [] });
// 获取内容索引表格数据
const getRdecord = async () => {
  const data: {} = {
    pageNumber: datas.pageNumber || pageCurrent.value,
    pageSize: datas.pageSize || pageSize.value,
  };
  const telData = (await request.fetchContentIndexTaskPage(data)) || {};
  let reqData = telData;
  let taskListData = reactive({});
  const records: any[] = [];
  reqData?.records?.map((item: any, index: number) => {
    taskListData = {
      createTime: item.createTime,
      oparation: ["失败详情"],
      num: index + 1,
      failCnt: item.failCnt,
      status: item.status === 0 ? "执行中" : "执行完成",
      sucCnt: item.sucCnt,
      taskName: item.taskName,
      id: item.id,
    };
    records.push(taskListData);
  });
  configData.total = reqData.total;
  configData.size = reqData.size;
  configData.records = records;

  nextTick(() => {
    scroll.y = getTableScroll(74, "taskList").y;
    scroll.isFixed = getTableScroll(74, "taskList").isFixed;
  });
};

//切换分页器
const changePage = (data: { pageCurrent: any; pageSize: any }) => {
  datas = {
    pageNumber: data.pageCurrent,
    pageSize: data.pageSize,
  };
  getRdecord();
  pageCurrent.value = data.pageCurrent;
  pageSize.value = data.pageSize;
};

//查看失败详情
const lookDetail = (item: dataSourceType) => {
  if (!btnPerm.value.includes("taskLoseDetailAble")) return;
  router.push({
    path: "/config/contentIndex/viewTasks/detail",
    query: { taskId: item.id },
  });
};
//onmounted
onMounted(() => {
  btnPerm.value = routerPerm();
  getRdecord();
});
</script>

<style lang="less" scoped>
.taskList {
  width: 100%;
  height: calc(100% - 72px);
  padding: 16px;
  background-color: #fff;

  ::v-deep(.ant-table-cell:nth-last-of-type(1)) {
    text-align: right;
  }
}

:deep(.ant-form-item) {
  width: 604px;
  display: flex;

  .ant-form-item-control {
    width: 494px;
    margin-left: 4px;
    flex: unset;
  }

  .ant-form-item-label {
    flex-grow: 0;
    width: 94px;
    text-align: right;
  }
}

::v-deep(.ant-form-item-control-input-content:hover) {
  .anticon-close-circle {
    display: block;
  }
}
</style>
